import React, { Component } from 'react';
import Chakan from '../../components/Popover/xiangqing/chakan'
import Tianjia from '../../components/Popover/xiangqing/tianjia'
import Xiugai from '../../components/Popover/xiangqing/xiugai'
import Delete from '../../gonggong/delete'
import { Layout, Breadcrumb, Menu, Dropdown, Table, Space } from 'antd';
import { DownOutlined } from '@ant-design/icons';
import axios from 'axios'
import { nanoid } from 'nanoid'
const { Header, Content, Footer } = Layout;
class Menus extends React.Component {
    state = {
        visible: false,
      };
      handleMenuClick = e => {
        if (e.key === '3') {
          this.setState({ visible: false });
        }
      };
      render(){

        return (
            <Menu  onClick={this.handleMenuClick}>
                {
                    (()=>{
                        if (this.props.text.length==0) {
                            return (
                                <Menu.Item key={nanoid()}>
                                <p >暂无图片</p>
                              </Menu.Item>)
                        }
                    })()
                }
                {
                    this.props.text.map((i, index,arr) => {
                   
                        return (
                            <Menu.Item key={nanoid()}>
                                {/* <a style={{ color: "#40a9ff" }} >{i}
                               23</a> */}
                               <Chakan value={i}/>
                            </Menu.Item>)
                    })
    
                }
            </Menu>)
      }
   
};
class index extends Component {
    state = {
        data: [],
        date: null,
        display: "none",
        index:-1,
        canshu:{
            url:"http://localhost:3001/api/goodsdelete",
            gengxin:this.gengxin,
            title:"删除图片",
            tixing:"您将要删除这张轮播图，确定吗？",
          }
    }
    componentDidMount() {
        axios.get("http://localhost:3001/api/xiangqing").then((req, res) => {
            let data = []
            // console.log(req.data.url);
            req.data.result.map((i, index) => {
                data[index] = {
                    key:nanoid(),
                    id: i.id,
                    title: i.title,
                    price: i.price,
                    type_one: i.type_one,
                    type_two: i.type_two,
                    url: []
                }
            })
            req.data.url.map((i, index) => {
                data.map((k, kindex, arr) => {
                    if (i.goodsid == k.id) {
                        arr[kindex].url.push(i.url)
                    }
                    
                })
            })
            if (data.length == 0) {
                data = [{ key:nanoid() }]
                this.setState({
                    data,
                    display: "none"
                })
            } else {
                this.setState({
                    data,
                    display: "block"
                })
            }
        })
        const d = new Date()
        const nian = d.getFullYear()
        const yue = d.getMonth() + 1
        const ri = d.getDate()
        const shi = d.getHours()
        const fen = d.getMinutes()
        const date = nian + "年" + yue + "月" + ri + "日" + shi + "时" + fen + "分"
        this.setState({
            date
        })
    }
    gengxin = () => {
        this.componentDidMount()
    }
    render() {
        const columns = [
            {
                title: '商品id',
                dataIndex: 'id',
                key: nanoid(),
                ellipsis: true,
                width: "100px"
            },
            {
                title: '商品名称',
                dataIndex: 'title',
                key: nanoid(),
                ellipsis: true,
                width: "280px"

            },
            {
                title: '价格',
                dataIndex: 'price',
                key: nanoid(),
                ellipsis: true,
                width: "100px"

            },
            ,
            {
                title: '一级分类',
                dataIndex: 'type_one',
                key: nanoid(),
                ellipsis: true,
                width: "100px"
            },
            ,
            {
                title: '二级分类',
                dataIndex: 'type_two',
                key: nanoid(),
                ellipsis: true,
                width: "100px"

            },
            {
                title: '商品图片',
                dataIndex: 'url',
                key: nanoid(),
                width: "280px",
                ellipsis: true,
                render: text => <Dropdown style={{zIndex:this.state.index}} overlay={<Menus text={text}/>} trigger={['click']}>
                    <a className="ant-dropdown-link" style={{display:this.state.data[0].id?"block":"none"}} onClick={e => e.preventDefault()}>
                        点击查看 <DownOutlined />
                    </a>
                </Dropdown>,
            },
            {
                title: '操作',
                key: nanoid(),
                render: (text, record) => {
                    const shuju=text
                    const url={id:text.id,img:text.url}
                    return (<Space size="middle">
             <Tianjia  gengxin={this.gengxin}   name="添加"/>
             <Xiugai shuju={shuju}  gengxin={this.gengxin}   name="修改"/>
             <Delete canshu={this.state.canshu} gengxin={this.gengxin} url={url} name="删除" display={this.state.display}/>
                    </Space>)
                },
            },
        ];
        const { data, date } = this.state
        // console.log(data);
        return (
            <Layout className="site-layout">
                <Header className="site-layout-background" style={{ padding: 0 }} />
                <Content style={{ margin: '0 16px' }}>
                    <Breadcrumb style={{ margin: '16px 0' }}>
                        <Breadcrumb.Item>home</Breadcrumb.Item>
                        <Breadcrumb.Item>商品详情管理</Breadcrumb.Item>
                    </Breadcrumb>
                    <div className="site-layout-background" style={{ padding: 24, minHeight: 360 }}>
                        <Table columns={columns} dataSource={data} />
                    </div>
                </Content>
                <Footer style={{ textAlign: 'center' }}>数据更新时间：{date}</Footer>
            </Layout>

        );
    }
}

export default index;